<template>
    <view class="container">
        <view class="p-40">
            <view class="text">储值金额</view>
            <view class="money mt-30">
                <uv-input placeholder="请输入金额" border="bottom" type="number" fontSize="40rpx" v-model="money">
                    <template v-slot:prefix>
                        <uv-text text="￥" margin="0 3px 0 0" type="tips"></uv-text>
                    </template>
                </uv-input>
            </view>
            <view class="btn-item">
                <button class="btn" @click="submit">确认支付</button>
            </view>

            <view class="notice">
                <view class="title">储值须知</view>
                <view class="content mt-20">
                    <rich-text :nodes="content" />
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useRequest } from 'alova';
import { setting } from '@/services/api/index';
import { handleJump } from '@/utils/common';
import { SubscriptionMessage } from '@/utils/common';
import { Toast } from '@/utils/uniapi/prompt';
import { rechargeSubmit } from '@/services/api/recharge';
onLoad(() => {
    const tmplIds = ['mb38cy0pAGBvfWymznIyC2_IZsd0Tuzo0Hbbty02sb0', '9S8qo6DcrTlPVWSu63GBZQdwhwEJcfKiniOnsOyC6wA'];
    SubscriptionMessage(tmplIds);
    getInit();
});
const money = ref(null);
const content = ref('储值须知');

const { send: getSetting } = useRequest(setting, { immediate: false });

const getInit = () => {
    getSetting().then((res) => {
        console.log(res);
        content.value = res.recharge_notice;
    });
};
const { send: rechargeSubmitSend } = useRequest(rechargeSubmit, { immediate: false });
const submit = () => {
    if (!money.value) {
        Toast('请输入储值金额');
        return;
    }
    const param = {
        amount: money.value,
    };
    rechargeSubmitSend(param).then((res) => {
        onPay(res);
    });
};

const onPay = (payInfo) => {
    wx.requestPayment({
        timeStamp: payInfo.timeStamp,
        nonceStr: payInfo.nonceStr,
        package: payInfo.package,
        signType: payInfo.signType,
        paySign: payInfo.paySign,
        success(res) {
            console.log(res);
            uni.showModal({
                title: '提示',
                content: '支付成功',
                success: function (ret) {
                    handleJump('Home', {}, true);
                    if (ret.confirm) {
                        console.log('用户点击确定');
                    }
                },
            });
        },
        fail(err) {
            console.log('支付失败');
            console.log(err);
        },
    });
};
</script>
<style lang="scss">
.container {
    background-color: #fff;
}
.text {
    font-size: 28rpx;
    color: #333;
}
.btn-item {
    margin-top: 50rpx;
}
.btn {
    width: 560rpx !important;
    height: 80rpx;
    padding: 0;
    text-align: center;
    line-height: 80rpx;
    background-color: #191919;
    // border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
}

.notice {
    margin-top: 50rpx;
    font-size: 28rpx;
}
</style>
